import './App.css';


import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

var Index = lazy(() => import('./views/Index'))
var Login = lazy(() => import('./views/Login'))
var Register = lazy(() => import('./views/Register'))
var Search = lazy(() => import('./views/Search'))
var Suggest = lazy(() => import('./views/Suggest'))
var Vip = lazy(() => import('./views/Vip'))
var Brand = lazy(() => import('./views/Brand'))
var Coupon = lazy(() => import('./views/Coupon'))
var Signin = lazy(() => import('./views/Signin'))
var NotFound = lazy(() => import('./views/NotFound'))

class App extends Component {
  render() {
    return (
      <div className='app'>
        <Suspense fallback={<h2>Loading..</h2>}>
          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/search" component={Search} />
            <Route exact path="/suggest" component={Suggest} />
            <Route exact path="/vip" component={Vip} />
            <Route exact path="/brand" component={Brand} />
            <Route exact path="/coupon" component={Coupon} />
            <Route exact path="/signin" component={Signin} />
            <Redirect exact from='/' to="/index" />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;